<template>
  <view class="invoice-header-container">
    <!-- 抬头类型筛选 -->
    <view class="filter-container">
      <view class="filter-tabs">
        <view 
          class="filter-tab" 
          :class="{ active: currentFilterType === 2 }"
          @click="handleFilterChange(2)"
        >
          <text class="tab-text">个人</text>
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: currentFilterType === 1 }"
          @click="handleFilterChange(1)"
        >
          <text class="tab-text">企业单位</text>
        </view>
      </view>
    </view>
    
    <view class="content">
      <!-- 空状态 -->
      <view v-if="loading" class="loading-container">
        <u-loading-icon mode="circle"></u-loading-icon>
        <text class="loading-text">加载中...</text>
      </view>
      
      <view v-else-if="invoiceList.length === 0" class="empty-container">
        <text class="empty-text">暂无发票抬头信息</text>
      </view>
      
      <!-- 发票抬头列表 -->
      <view v-else class="invoice-list">
        <view 
          v-for="item in invoiceList" 
          :key="item.id" 
          class="invoice-item"
          @click="handleEdit(item)"
        >
          <view class="invoice-header">
            <view class="header-type">
              <text class="type-text">{{ item.headerType === 1 ? '企业单位' : '个人' }}</text>
            </view>
            <view class="header-actions" @click.stop>
              <view class="action-btn" @click="handleEdit(item, $event)">
                <u-icon name="edit-pen" color="#999" size="20"></u-icon>
              </view>
              <view class="action-btn" @click="handleDelete(item, $event)">
                <u-icon name="trash" color="#ff4757" size="20"></u-icon>
              </view>
            </view>
          </view>
          
          <view class="invoice-content">
            <view class="company-info">
              <view class="name-row">
                <text class="name-label">{{ item.headerType === 1 ? '公司名称：' : '个人名称：' }}</text>
                <text class="name-value">{{ item.headerType === 1 ? item.companyName : item.personalName }}</text>
              </view>
              <text v-if="item.headerType === 1 && item.taxNumber" class="tax-number">税号：{{ item.taxNumber }}</text>
            </view>
            
            <view v-if="item.headerType === 1" class="company-details">
              <view v-if="item.registeredAddress" class="detail-item">
                <text class="detail-label">注册地址：</text>
                <text class="detail-value">{{ item.registeredAddress }}</text>
              </view>
              <view v-if="item.registeredPhone" class="detail-item">
                <text class="detail-label">注册电话：</text>
                <text class="detail-value">{{ item.registeredPhone }}</text>
              </view>
              <view v-if="item.bankName" class="detail-item">
                <text class="detail-label">开户银行：</text>
                <text class="detail-value">{{ item.bankName }}</text>
              </view>
              <view v-if="item.bankAccount" class="detail-item">
                <text class="detail-label">银行账号：</text>
                <text class="detail-value">{{ item.bankAccount }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部固定新增按钮 -->
    <view class="bottom-add-btn">
      <u-button shape="circle" color="#5BA2F9" @click="handleAdd">新增发票抬头</u-button>
    </view>
  </view>
</template>

<script>
import { listInvoiceHeader, delInvoiceHeader, myInvoiceHeaderList } from '@/api/course/invoiceHeader'

export default {
  data() {
    return {
      loading: false,
      invoiceList: [],
      currentFilterType: 2 // 默认查询个人抬头
    }
  },
  onLoad() {
    this.getInvoiceList()
  },
  onShow() {
    // 页面显示时刷新列表
    this.getInvoiceList()
  },
  methods: {
    // 获取发票抬头列表
    async getInvoiceList() {
      this.loading = true
      try {
        const response = await myInvoiceHeaderList({
          headerType: this.currentFilterType
        })
        this.invoiceList = response.data || []
      } catch (error) {
        console.error('获取发票抬头列表失败:', error)
        this.$modal.showToast('获取发票抬头列表失败')
      } finally {
        this.loading = false
      }
    },
    
    // 筛选类型切换
    handleFilterChange(headerType) {
      if (this.currentFilterType !== headerType) {
        this.currentFilterType = headerType
        this.getInvoiceList()
      }
    },
    
    // 新增发票抬头
    handleAdd() {
      uni.navigateTo({
        url: '/pages/mine/invoiceHeader/add'
      })
    },
    
    // 编辑发票抬头
    handleEdit(item, event) {
      // 阻止事件冒泡
      if (event) {
        event.stopPropagation()
        event.preventDefault()
      }
      uni.navigateTo({
        url: `/pages/mine/invoiceHeader/edit?id=${item.id}`
      })
    },
    
    // 删除发票抬头
    handleDelete(item, event) {
      // 阻止事件冒泡
      if (event) {
        event.stopPropagation()
        event.preventDefault()
      }
      uni.showModal({
        title: '确认删除',
        content: `确定要删除发票抬头"${item.headerType === 1 ? item.companyName : item.personalName}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              await delInvoiceHeader(item.id)
              this.$modal.showToast('删除成功')
              this.getInvoiceList()
            } catch (error) {
              console.error('删除发票抬头失败:', error)
              this.$modal.showToast('删除失败')
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.invoice-header-container {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 筛选容器样式 */
.filter-container {
  background: #fff;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.filter-tabs {
  display: flex;
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 6rpx;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  border-radius: 8rpx;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background: #5BA2F9;
  box-shadow: 0 2rpx 8rpx rgba(91, 162, 249, 0.3);
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.filter-tab.active .tab-text {
  color: #fff;
  font-weight: bold;
}

.content {
  padding: 20rpx;
  padding-bottom: 120rpx; /* 为底部固定按钮留出空间 */
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  margin: 30rpx 0 10rpx 0;
  font-size: 32rpx;
  color: #999;
}

.empty-hint {
  font-size: 24rpx;
  color: #ccc;
}

.invoice-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.invoice-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.invoice-item:active {
  transform: scale(0.98);
}

.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.header-type {
  background: linear-gradient(135deg, #5BA2F9, #667eea);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.type-text {
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  padding: 8rpx;
  border-radius: 8rpx;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40rpx;
  min-height: 40rpx;
}

.action-btn:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.invoice-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.company-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.name-label {
  font-size: 28rpx;
  color: #666;
  font-weight: normal;
}

.name-value {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  flex: 1;
}

.tax-number {
  font-size: 26rpx;
  color: #666;
}

.company-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.detail-item {
  display: flex;
  align-items: flex-start;
}

.detail-label {
  font-size: 26rpx;
  color: #999;
  min-width: 140rpx;
}

.detail-value {
  font-size: 26rpx;
  color: #666;
  flex: 1;
  word-break: break-all;
}

.remark {
  margin-top: 10rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
}

.remark-text {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}

/* 底部固定新增按钮 */
.bottom-add-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 30rpx 20rpx 40rpx 20rpx;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
</style>
